<template>
	<view class="samplingCompanyActive">
		<view class="upper">
			<commonNavBar title="上传未抽样确认单"></commonNavBar> 
		</view>
		<view class="centre">
			<view class="content-container"> 
				<view class="samplingCompany">
					<view class="box">
						<view class="title">{{ initialDatas.companyName }}</view>
						<view class="manage_status_box">
							<text class="manage_status_title">注销状态：</text>
							<radio-group v-model="initialDatas.cancellationStatus" @change="businessStatusRadioChange" class="custom-radio-group">
								<label class="labelRadio" :class="{'yes': (initialDatas.cancellationStatus === '0')} ">
									<radio value="0" :checked="initialDatas.cancellationStatus === '0'" /> 未注销
								</label>
								<label class="labelRadio" :class="{ 'no': (initialDatas.cancellationStatus === '1') } ">
									<radio value="1" :checked="initialDatas.cancellationStatus === '1'" /> 已注销
								</label> 
							</radio-group>
						</view>
						<view class="abnormal">
							<view class="facadePhoto">
								抽样确认单:
								<image :src="filePath" v-if="filePath != ''"/>
								<image v-for="(file, index) in initialDatas.fileList" 
									:key="index" 
									:src="file.jgSamplingFile == undefined ? '/static/img/upload.png': baseUrl + file.jgSamplingFile" 
									@click="showNoticeControl(file.jgSamplingFile)"/>
							</view>
						</view>
						<view class="prompt">
							<view class="title">温馨提示：</view>
							<view class="content">
								1.注销状态为正常：确认单需要两次上传完成，企业状态变为已覆盖；<br/>
								2.注销状态为注销：确认单只需要一次上传完成，企业状态变为已覆盖；<br/>
								3.注销状态为正常：确认单首次上传完成后，需要间隔三个月以上上传第二次确认单，显示【上传】按钮；<br/>
								4.以上确认单的完成上传，必须在当年的12月31日之前全部完成。
							</view>
						</view>
						<view class="fixed">
							<button class="determine" @click="finalConfirm()">确认</button>
							<button class="cancellation" @click="closeResultLog()">取消</button> 
						</view>
					</view>
				</view>
			</view>
		</view> 
	</view>
</template>

<script>
import commonNavBar from '@/components/CommonNavBar.vue';

export default {
		components:{
			commonNavBar
		},
		data() {
			return { 
				baseUrl: uni.$baseUrl,
				pushId: null,
				initialDatas: {},
				filePath: '',
				uploadFile: {}
			}
		},
		onLoad(options) {
			const  that = this;   
			that.pushId = options.id;
			this.initialData();
		},
		methods: {
			async initialData() {
				const res = await uni.$api.openSamplingView({
					'pushId': this.pushId
				});
				if(res.data.code === 0) {
					this.initialDatas = res.data.data;
				}
			},
			businessStatusRadioChange(option) {
				this.$set(this.initialDatas,"cancellationStatus", option.target.value);
			},
			// 点击图片
			showNoticeControl(filePath){
				console.log('filePath', filePath)
				const that = this;
				console.log(filePath)
				if(filePath == undefined || filePath == 'undefined' || that.initialDatas.isUpload == 0){
					that.noticeFormOpen();
					return;
				}
				uni.showActionSheet({
					itemList:['查看文件'],
					success: function (res) {
						if(res.tapIndex == 0){  
							Vue.prototype.$previewImage(filePath);  
						}
					}
				})
			},
			noticeFormOpen() {
				const that = this;
				uni.showActionSheet({
					itemList:['选择文件'],
					success: function (res) {
						if(res.tapIndex == 0) {
							uni.chooseImage({
								count:1,
								success:(e) => {    
									plus.io.resolveLocalFileSystemURL(e.tempFilePaths[0], function(entry) {
										entry.file(function(file) {
											var fileReader = new plus.io.FileReader()
											fileReader.readAsDataURL(file)
											fileReader.onloadend = function(evt) {
												 that.saveNotice(evt.target.result);
											}
										})
									}) 
								},
								fail: () => {
									uni.showToast({
										icon:'error',
										title:'图片选择错误'
									})
								}
							})
						}
					}
				})
			},
			async saveNotice(noticePic) {
				const res = await uni.$api.uploadSamplingFile({
					'pushId': this.pushId,
					'cancellationStatus': this.initialDatas.cancellationStatus,
					'file': noticePic
				});
				if(res.data.code == '0'){
					this.uploadFile = res.data.data
					this.filePath = uni.$baseUrl+res.data.data.filePath
					uni.showModal({ 
						content: '保存成功,告知单图片已自动存储到相册',
						title:'提示',
						showCancel:false,
						success:function() {
							
						}
					}) 
				} else {
					uni.showToast({
						icon: 'success',
						title:'告知单存储失败'
					})
				}
			},
			async finalConfirm() {
				let requestData = {
				  'pushId': this.pushId,
				  'cancellationStatus': this.initialDatas.cancellationStatus
				};
				
				if (this.uploadFile.fileName) {
				  requestData.fileName = this.uploadFile.fileName;
				}
				if (this.uploadFile.filePath) {
				  requestData.filePath = this.uploadFile.filePath;
				}
				
				const res = await uni.$api.saveSamplingCompany(requestData);
				
				if(res.data.code === 0) {
					console.log('res', res)
					uni.showToast({
						icon: 'success',
						title: res.data.message
					})
					uni.navigateBack();
				}
			},
			closeResultLog() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.samplingCompanyActive {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);
		
		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
		
			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;
			}
		}
		
		
		
		.centre {
			margin: 110rpx 0 0 0;
			// padding: 0 17.5rpx;
			height: calc(100vh - 280rpx);
			overflow-x: hidden;
		
			.content-container {
				
				.samplingCompany {
					// padding: 0 17.5rpx 250rpx 17.5rpx;
					
					.box {
					
						.title {
							height: 73rpx;
							line-height: 73rpx;
							background: #E1EAF4;
							display: flex;
							text-indent: 28rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #002B5B;
						}
					
						.manage_status_box{
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							background: #FFFFFF;
							box-shadow: 0rpx 0rpx 29rpx 0rpx rgba(0, 0, 0, 0.05);
							border-radius: 15rpx;
							padding: 23rpx 28rpx;
							margin-bottom: 20rpx;
							
							
							.manage_status_title {
								font-size: 26rpx;
							}
							
							.custom-radio-group {
								display: flex;
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
												
								.labelRadio {
									display: flex;
									margin: 0 10rpx;
									align-items: center;
									
									/deep/radio {
										display: none;
									}
									
									&::before {
										content: '';
										width: 20rpx;
										height: 20rpx;
										line-height: 20rpx !important;
										text-align: center;
										border: 1rpx solid #979797;
										border-radius: 50%;
										font: normal normal normal 14px / 1 uni;
										font-size: 20rpx;
										color: #fff;
										margin: 0 4rpx 0 0;
									}
									
									&.yes::before {
										content: "\EA08";
										background-color: #07D276;
										border-color: #07D276;
									}
									
									&.no::before {
										content: "\00D7";
										background-color: #FF1F1F;
										border-color: #FF1F1F;
										line-height: 18rpx !important;
									}
								}
							}
							
							uni-navigator {
								display: flex;
								align-items: center;
								color: #0552A9;
							}
							
							&:nth-child(even) {
								background: #F9F9F9;
							}
						}
						
						.abnormal {
							
							.facadePhoto {
								height: 150px;
								font-size: 26rpx;
								padding: 11px 14px;
								display: flex;
								justify-content: flex-start;
								
								image {
									width: 100rpx;
									height: 100rpx;
									border: 1px solid #e8e8e8;
									border-radius: 7px;
									margin-left: 20rpx;
								}
							}
						}
						.prompt {
							
							.content {
								padding: 20rpx 40rpx;
								font-size: 20rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
							}
						}
						
						.fixed {
							position: fixed;
							left: 0;
							bottom: 0;
							width: 100%;
						    display: flex;
						    justify-content: space-around;
						    align-items: center;
							background: #fff;
							
							button {
								width: 134px;
								height: 27px;
								line-height: 27px;
								background: #0552A9;
								border-radius: 5px;
								font-size: 10px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								margin-top: 40rpx;
								margin-bottom: 40rpx;
								color: #fff;
								
								&.cancellation {
									background: none;
									border: 1px solid #979797;
									color: #979797;
								}
							}
						}
					}
				}
			}
		}
	}
</style>